<!-- 搜索表单 -->
<template>
  <div class="searchContainer">
    <el-card class="box-card"
             shadow="never"
             body-style="padding: 22px 22px 0 22px;">
      <!-- 订单状态 -->
      <!-- <div class="selectTime flex-align-center">
        <div class="orderStatus">订单状态</div>
        <ul class="timeTab" v-for="(item, index) in siteStatusArr" :key="index">
          <li
            :class="[currentIndex == index ? 'active' : '']"
            @click="switchTimeTab(index)"
            >{{ item.value }}</li
          >
        </ul>
      </div> -->
      <el-form label-width="72px"
               ref="form"
               :model="form"
               @keyup.enter="search">
        <el-row :gutter="8">
          <el-col :lg="6"
                  :md="12"
                  :sm="12"
                  :xs="24">
            <el-form-item label="站点名称">
              <el-input clearable
                        v-model.trim="form.name"
                        placeholder="请输入站点名称" />
            </el-form-item>
          </el-col>
          <!-- <el-col :lg="6"
                  :md="12"
                  :sm="12"
                  :xs="24">
            <el-form-item label="手机号">
              <el-input clearable
                        v-model.number="form.phone"
                        placeholder="请输入手机号" />
            </el-form-item>
          </el-col> -->
          <el-col :lg="6"
                  :md="12"
                  :sm="12"
                  :xs="24">
            <el-form-item label="站点域名">
              <el-input clearable
                        v-model="form.url"
                        placeholder="请选择站点域名" />
            </el-form-item>
          </el-col>
          <!-- <el-col :lg="6" :md="12" :sm="12" :xs="24">
            <el-form-item label="到期时间:" prop="dateRange">
              <el-date-picker
                v-model="form.timeValue"
                type="datetime"
                placeholder="选择日期时间"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
          
            </el-form-item>
          </el-col> -->
          <el-col :lg="6"
                  :md="12"
                  :sm="12"
                  :xs="24">
            <el-form-item label-width="16px">
              <el-button type="primary"
                         @click="search">查询</el-button>
              <el-button @click="resetForm('form')">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { siteStatusArr } from '../constant/constant';
export default {
  name: 'SystemUser',
  components: {
    // RegionsSelect
  },
  data () {
    // 默认表单数据
    const defaultWhere = {
      //  站点名称
      name: '',

      // 站点域名
      url: '',

    };
    return {
      siteStatusArr,
      // 表单数据
      form: {
        ...defaultWhere
      },
      sumbitForm: {},
      currentIndex: '0'
    };
  },
  props: {
    typeList: Array,
    oemList: {
      type: Array,
      default: () => []
    },
    secondaryList: {
      type: Array,
      default: () => []
    },
    currentPlatform: {
      type: String,
      default: ''
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    switchTimeTab (index) {
      this.currentIndex = index;
      if (this.currentIndex == 0) {
        this.$emit('search', { siteStatus: '' });
      } else {
        this.$emit('search', { siteStatus: index });
      }
    },
    /* 搜索 */
    async search () {
      for (const key in this.form) {
        if (key == 'timeValue') {
          //   let startTime = this.form[key]?.[0];
          let endTime = this.form[key];
          //   this.sumbitForm['startDate'] =
          //     startTime == undefined ? '' : startTime;
          this.sumbitForm['endDate'] = endTime == undefined ? '' : endTime;
        } else if (key == 'orderAmount') {
          this.sumbitForm['startOrderAmount'] =
            this.form[key].startOrderAmount == undefined
              ? ''
              : this.form[key].startOrderAmount;
          this.sumbitForm['endOrderAmount'] =
            this.form[key].endOrderAmount == undefined
              ? ''
              : this.form[key].endOrderAmount;
        } else {
          this.sumbitForm[key] = this.form[key];
        }
      }

      this.$emit('search', this.sumbitForm);
    },
    /*  重置 */
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.currentIndex = '0';
      this.form = {};
      this.sumbitForm = {};
      this.$emit('search', this.sumbitForm);
    }
  }
};
</script>
<style lang="less" scoped>
.searchContainer {
  margin-bottom: 15px;
}
.selectTime {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .timeTab {
    display: flex;
    align-items: center;
    margin-right: 20px;
    margin-bottom: 10px;
    li {
      list-style-type: none;
      display: block;
      width: 85px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      border: 1px solid #d9d9d9;
      border-radius: 10px;
    }
    .active {
      width: 85px;
      height: 36px;
      border-radius: 6px;
      background: #1890ff;
      color: #fff;
      text-align: center;

      line-height: 36px;
    }
  }
  .orderStatus {
    width: 68px;
    height: 34px;
    font-size: 14px;
    line-height: 34px;

    margin-left: 5px;
  }
  .filterDate {
    text-align: center;
    line-height: 34px;
    width: 90px;
    height: 34px;
    font-size: 14px;
    border-radius: 2px 0px 0px 2px;
    border: 1px solid #d9d9d9;
    border-right: none;
  }
  .ele-fluid {
    width: 300px !important;
  }
}
</style>
